<template>
  <div class="example" :style="borderStyle">
    <el-row :gutter="15" class="dateBody">
      <el-col :span="6">
        <LeftTopVue @initData="initData" />
      </el-col>
      <el-col
        :span="17"
      ><ScheduleDispaly
        ref="scheduleDispalyRef"
        @queryCalendarSchedule="queryCalendarSchedule($event)"
      /></el-col>
    </el-row>

    <Calendar ref="scheduleCalendarDisplayRef" @handleDelete="handleDelete" />
  </div>
</template>

<script>
import LeftTopVue from './LeftTop.vue';
import Calendar from './CalendarComponent.vue';
import ScheduleDispaly from './ScheduleDisplay.vue';

export default {
  name: 'Index',
  components: {
    LeftTopVue,
    Calendar,
    ScheduleDispaly
  },
  props: {
    temp: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return { borderStyle: {}};
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    themes: {
      handler(val, oldVal) {
        this.$nextTick(() => {
          this.borderStyle.background = val.columnGroundColor;
          this.borderStyle.color = val.fontColor;
          this.borderStyle = Object.assign({}, this.borderStyle);
        });
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    this.$store
      .dispatch('GetThemes')
      .then(res => {
        return true;
      })
      .catch(error => {
        console.log(error);
      });
    // window.addEventListener(
    //   "storage",
    //   e => {
    //     //e只是一个传参
    //     //获取被修改的键值
    //     if (e.key == "themes") {
    //       //分别打印会发现内容一致
    //       //console.log(e.storageArea.themes);
    //       console.log("当前主题", localStorage.themes);
    //       this.$store
    //         .dispatch("GetThemes")
    //         .then(res => {
    //           return true;
    //         })
    //         .catch(error => {
    //           console.log(error);
    //         });
    //       // this.$store.getters.theme = JSON.parse(localStorage.themes);
    //     }
    //   },
    //   false
    // );
  },

  methods: {
    initData() {
      this.$refs.scheduleDispalyRef.initData();
      this.$refs.scheduleCalendarDisplayRef.initData();
    },
    queryCalendarSchedule(param) {
      this.$refs.scheduleCalendarDisplayRef.page.pageNo = 0;
      this.$refs.scheduleCalendarDisplayRef.querySchedule(param);
      this.$refs.scheduleCalendarDisplayRef.setIsSelectedValue(new Date(param));
    },
    handleDelete() {
      this.$refs.scheduleDispalyRef.initData();
    },

    getDate(item) {
      const nowDate = new Date();
      const year = nowDate.getFullYear();
      const month = nowDate.getMonth() + 1;
      const day = nowDate.getDate();
      const wk = new Date().getDay();
      const weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ];
      const week = weeks[wk];
      const dates = [year + '年' + month + '月', day, week];
      return dates[item];
    }
  }
};
</script>

<style scoped>
.example {
  height: 100%;
}
.dateBody {
  padding-left: 50px;
}
.bottom {
  background: #fff;
  /* width: 92%; */
  padding-left: 50px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:firs-child {
  margin-top: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.important {
  height: 30px;
  width: 30px;
  background-color: #ff5722;
}

.danger {
  height: 30px;
  width: 30px;
  background-color: #ffb800;
}

.simple {
  height: 30px;
  width: 30px;
  background-color: #5fb878;
}
</style>
